<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src=" https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <style>
        #box {
            width: 100px;
        }
    </style>

</head>

<body>
    <div id="box">
        box
    </div>
    <div>
        box2
    </div>
    <script>
        // jquery的生态
        // 以前--很多人都 基于jq 封装了很多的功能
        // jq提供了方法，很容易让我们扩展jq的功能--编写jq插件

        // jq插件--》函数
        /*
            1-给jq伪数组-对象，添加方法- 实例方法--跟dom操作有关系
            2-$ 函数--》添加方法 ->   静态方法   ---工具函数
                        $.ajax()
        */

        // 1-给jq伪数组-对象，添加方法- 实例方法

        // $('#box').css()
        // $('#box').myCss()
        // $.ajax()
        // $() -> 返回一个对象，想要给这个对象添加一个方法--实例方法
        // $('#box').css()

        // $.fn.myCss = function(){}
        $.prototype.myCss = function (key, value) {
            console.log('myCss');
            console.log(this);//-->$('div') jq对象

            if (arguments.length == 1 && typeof key == 'string') {
                // 返回第一个匹配元素的最终 样式
                return getComputedStyle(this[0])[key]
            } else {
                for (var i = 0; i < this.length; i++) {
                    let dom = this[i];
                    dom.style[key] = value
                }
            }




        }

        $('div').myCss('color', 'red')

        console.log($('div').myCss('width'));


        // $.ajax()

        let arr = [9, 8, 7];
        $.each(arr, function (i, v) {
            console.log(i, v);
        })
        let resArr = $.map(arr, function (v, i) {
            return v * 100
        })
        console.log(resArr);


        arr.forEach(function (v, i) {
            console.log(v, i);
        })

        // 2 - $ 函数--》添加方法 -> 静态方法
        $.extend({
            myEach: function (array, fn) {
                // array = arr
                // fn = function(i,v){log(i,v)}
                console.log('myEach');
                // 遍历array 调用fn，传入实参
                for (let i = 0; i < array.length; i++) {
                    //调用fn 传入 元素的下标 和元素本身
                    fn(i, array[i])
                }
            }
        })

        $.myEach(arr, function (i, v) {
            console.log(i, v);
        })


        // http://www.htmleaf.com/vue/vue-component/list_44_5.html

    </script>

</body>

</html>